<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职位详情</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/job-detail.css">
</head>
<body class="page">
    <div class="page-content job-detail-page">
        <div class="back-button">
            <img src="../images/back.svg" alt="返回" class="back-icon">
            <span>返回</span>
        </div>
        
        <div class="job-detail-header">
            <div class="job-detail-main">
                <h1 class="job-detail-title">加载中...</h1>
                <div class="job-detail-salary">薪资: 加载中...</div>
            </div>
            <div class="favorite-btn">
                <img src="../images/favorite-outline.svg" alt="收藏" class="favorite-icon">
            </div>
        </div>
        
        <div class="company-detail">
            <div class="company-logo">
                <img src="../images/company-placeholder.svg" alt="公司logo" id="company-logo">
            </div>
            <div class="company-info-detail">
                <h3 class="company-name-detail">加载中...</h3>
                <p class="company-location">地址: 加载中...</p>
            </div>
        </div>
        
        <div class="job-meta">
            <div class="meta-item">
                <img src="../images/calendar.svg" alt="发布时间" class="meta-icon">
                <span id="publish-time">发布时间: 加载中...</span>
            </div>
            <div class="meta-item">
                <img src="../images/briefcase.svg" alt="工作类型" class="meta-icon">
                <span id="job-type">工作类型: 加载中...</span>
            </div>
            <div class="meta-item">
                <img src="../images/education.svg" alt="学历要求" class="meta-icon">
                <span id="education">学历要求: 加载中...</span>
            </div>
            <div class="meta-item">
                <img src="../images/experience.svg" alt="工作经验" class="meta-icon">
                <span id="experience">工作经验: 加载中...</span>
            </div>
        </div>
        
        <div class="detail-section">
            <h3 class="section-title">职位描述</h3>
            <div class="section-content" id="job-description">
                <p>加载中...</p>
            </div>
        </div>
        
        <div class="detail-section">
            <h3 class="section-title">职位要求</h3>
            <div class="section-content" id="job-requirements">
                <p>加载中...</p>
            </div>
        </div>
        
        <div class="detail-section">
            <h3 class="section-title">技能要求</h3>
            <div class="job-tags" id="job-skills">
                <span class="tag">加载中...</span>
            </div>
        </div>
        
        <div class="apply-section">
            <button class="apply-btn" id="apply-button">申请职位</button>
        </div>
    </div>
    
    <!-- 申请职位弹窗 -->
    <div class="modal" id="apply-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>申请职位</h3>
                <span class="modal-close">&times;</span>
            </div>
            <div class="modal-body">
                <div id="login-required" style="display: none;">
                    <p>请先登录后再申请职位</p>
                    <button class="primary-btn" id="go-login-btn">去登录</button>
                </div>
                
                <div id="apply-form" style="display: none;">
                    <div class="form-group">
                        <label for="resume-select">选择简历</label>
                        <select id="resume-select" class="form-control">
                            <option value="">--请选择简历--</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label>或上传新简历</label>
                        <div class="file-upload">
                            <input type="file" id="resume-file" accept=".pdf,.doc,.docx">
                            <label for="resume-file" class="file-label">选择文件</label>
                            <span class="file-name">未选择文件</span>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="cover-letter">求职信 (选填)</label>
                        <textarea id="cover-letter" class="form-control" rows="4" placeholder="介绍一下自己为何适合这个职位..."></textarea>
                    </div>
                    
                    <button class="primary-btn" id="submit-application">提交申请</button>
                </div>
                
                <div id="apply-success" style="display: none;">
                    <div class="success-icon">
                        <img src="../images/success.svg" alt="成功">
                    </div>
                    <h3>申请成功!</h3>
                    <p>您的申请已提交，我们会尽快处理</p>
                    <button class="primary-btn" id="close-success-btn">关闭</button>
                </div>
                
                <div id="apply-loading" style="display: none;">
                    <div class="loading-spinner"></div>
                    <p>处理中，请稍候...</p>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/api.js"></script>
    <script src="../js/job-detail.js"></script>
</body>
</html> 